<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="main">
	<div @click="init()">重置</div>
	<div v-for="(user, index) in userList" class="user" :style="{left:user.x, top: user.y}" @click="user.isShowState = !user.isShowState">
		<span v-show="user.isShowState">{{ user.name }}</span>
	</div>
</div>

<style>
	#main {
		position: absolute;
		top: 0;
		bottom: 60px;
		left: 0;
		right: 100px;
	}

	.user {
		position: absolute;
		background-color: #20B2AA;
		color: white;
		padding: 20px 30px;
		border: 1px solid white;
		border-radius: 5px;
		height: 20px;
		line-height: 20px;
		width: 50px;
		cursor: pointer;
		user-select: none;
		text-align: center;
	}
</style>

<script>
	var vm = new Vue({
		el: '#main',
		data: {
			userNameList: ["刘子华","陈尚钰","梁光耀","黄鹏涛","覃健","罗铿","赵佰贤","罗莹","王政杰","覃培源", "蒙天爱", "刘宏成", "黄承蒙", "贺园峰", "古豪", "李林钊", "李营香", "韦德伟", "王祥珉"
	],
			userList: [],
		},
		created() {
			this.init()
		},
		mounted() {},
		methods: {
			init() {
				this.userList = []
				this.userNameList.forEach((name) => {
					var user = {
						name: name,
						x: `${Math.random() * 100}%`,
						y: `${Math.random() * 100}%`,
						isShowState: false,
					}
					this.userList.push(user)
				})
			},
		}
	})
</script>

<script src="">
	// 随机点名
	// 点名范围: ["刘子华", "陈尚钰", "梁光耀", "黄鹏涛", "覃健", "罗铿", "赵佰贤", "罗莹", "王政杰", "覃培源", "蒙天爱", "刘宏成", "黄承蒙", "贺园峰", "古豪", "李林钊", "李营香", "韦德伟", "王祥珉"]

	// 1 页面上根据点名范围显示对应数量的	标签, 标签内容是名字
	// 2 所有标签的位置随机分布
	// 3 隐藏所有标签内容, 鼠标点击标签显示对应标签的名字
	// 4 页面上添加一个"重置"按钮, 点击重置,重新排序所有同学, 并隐藏名字
	// 5 样式优化,让所有的标签不超出浏览器窗口的大小
</script>
